<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js</title>
</head>
<body>
	<div id='app'>
		<h3>{{message}}</h3>
	</div>
	<div id="app-2">
		<span v-once>{{message}}</span>
		<button v-on:click='changeMessage'>改变message</button>
	</div>
	<div id="app-3">
		<p>{{message}}</p>
		<input v-model.number = 'message'>
	</div>
	<div id='app-4'>
		<ol>
			<li v-for="todo in todos">
				{{todo.text}}
			</li>
		</ol>
	</div>
	<div id='app-5'>
		{{message | toInt | toAdd}}
	</div>
	<div id="app-6">
		<div>原来的值：{{message}}</div>
		<div>属性的值：{{int_number}}</div>
	</div>
	<div id="app-7">
		<div v-bind:class="{active:isActive,'text-danger':hasError}"></div>
	</div>
	<div id="app-8">
		<div v-bind:class="classObject"></div>
	</div>
	<div id="app-9">
		<div v-bind:class="[isActive?activeClass:'',errorClass]"></div>
	</div>
	<div id="app-10">
		<div v-bind:class="[{active:isActive},errorClass]"></div>
	</div>
	<div id="app-11">
		<h1 v-if="ok">yes</h1>
		<h1 v-else>no</h1>
	</div>
	<div id="app-12">
		<h1 v-if="ok">love</h1>
		<h1 v-if="!ok">evol</h1>
	</div>
	<div id="app-13">
		<h1 v-show="ok">sile</h1>
	</div>
	<ul id="app-14">
		<li v-for="(item,index) in items">
			{{ parentMessage }}-{{ index }}-{{ item.message }}

		</li>
	</ul>
	<ul id="app-15">
		<li v-for="(value,key,index) in object">
			{{ value }}-{{ key }}-{{ index }}
		</li>
	</ul>
	<ul id="app-16">
		<li v-for="n in 10">
			{{ n }}
		</li>
	</ul>
	<ul id="app-17">
		<li v-for="n in evenNumbers">
			{{ n }}
		</li>
	</ul>
	<div id='app-18'>
		<button v-on:click='greet'>greet</button>
	</div>
	<button onclick="example.greet()">点击下试试？</button>
	<div id="app-19">
		<button v-on:click="counter += 1">add 1</button>
		<p>the button above has been clicked {{ counter }} times</p>
	</div>
	<div id="app-20">
		<button v-on:click="say('hi')">say hi</button>
		<button v-on:click="say('what')">say what</button>
	</div>
	<div id="app-21">
	  <button v-on:click="warn('form cannot be submitted yet',$event)">submit</button>
	</div>
	<div id="app-22">
	 <a href="www.baidu.com" v-on:click.stop='doThis'>连接域名</a>
	</div>
	<div id="app-23">
	 <span>multiline message is:</span>
	 <p>{{message}}</p>
	 <br>
	 <textarea v-model="message" placeholder='add lines'></textarea>
	</div>
	<div id="app-24">
		<input type="checkbox" id="checkbox" v-model.lazy="checked">
		<label for="checkbox">{{ checked }}</label>
	</div>
	<div id="app-25">
		<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox" id="john" value="john" v-model="checkedNames">
		<label for="john">John</label>
		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		<label for="mike">mike</label>
		<br>
		<span>checked names: {{ checkedNames }}</span>
	</div>
	<div id="app-26">
		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">one</label>
		<br>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">two</label>
		<br>
		<span>picked:{{ picked }}</span>
	</div>
	<div id="app-27" multiple>
		<select v-model="selected">
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>selected: {{ selected }}</span>
	</div>
	<div id="app-28">
		<select v-model="selected">
			<option v-for="option in options" v-bind:value="option.value">
				{{ option.text }}
			</option>
		</select>
		<span>selected: {{ selected }}</span>
	</div>
	<div id="app-29">
		<input type="radio" v-model="pick" v-bind:value="a">
	</div>
	<div id="app-30" style='solid 1px red'>
		<my-component></my-component>
	</div>
	<div id="app-31" style='solid 1px red'>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>
	<div id="app-32">
		<my-component></my-component>
	</div>
	<div id="app-33">
		<my-component></my-component>
	</div>
	<div id="app-34">
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>
	<div id="app-35">
		<my-component message="hello world"></my-component>
	</div>
	<div id="app-36">
		<input v-model="parentMsg">
		<br>
		<child v-bind:my-message="parentMsg"></child>
	</div>
	<div id="app-37">
		<p>{{ total }}</p>
		<button-counter v-on:increment="incrementTotal"></button-counter>
		<button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
	<div id="app-38">
		<button-counter @click.native='doTheThing'></button-counter>
	</div>
	<div id='v-model-example'>
		<p>{{ message }}</p>
		<my-input
			label="Message"
			v-bind:value="message" v-on:input="message = arguments[0]"
		>
		</my-input>
	</div>
	<script type='text/javascript' src='vue.js'></script>
	<script type='text/javascript'>
		new Vue({
			el:'#app',
			data: {
				message: 'hello af'
			}
		})
	</script>
	<script type='text/javascript'>
		new Vue({
            el:'#app-2',
            data: {
            	message: 'hello vue'
            },
            methods: {
                 changeMessage: function() {
                 	this.message = 'hello china'
                 }
            }
		})
	</script>
	<!-- 双向绑定事件 -->
	<script type='text/javascript'>
		new Vue({
			el:'#app-3',
			data: {
				message: '今天是个好天气'
			}
		})
	</script>
	<!-- 列表 -->
	<script type="text/javascript">
		new Vue({
			el:'#app-4',
			data: {
				todos: [
                     {text:'learn good js'},
                     {text:'learn vue'},
                     {text:'learn php'}
				]
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-5",
			data: {
				message: 180.05
			},
			filters: {
				toInt: function (value) {
					return parseInt(value);
				},
				toAdd: function (value) {
					return value+1;
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-6',
			data: {
				message: 6666.6666
			},
            computed: {
            	int_number: function () {
            		return parseInt(this.message);
            	}
            }
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-7",
			data: {
				isActive:true,
				hasError:true
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-8",
			data: {
				classObject: {
                   active: true,
                   'text-danger':true
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-9",
			data:{
				isActive:false,
				activeClass:'active',
				errorClass:'text-danger'
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-10",
			data:{
				isActive:false,
				errorClass:'text-danger'
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-11",
			data: {
				ok: false
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-12",
			data: {
				ok: false
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-13",
			data: {
				ok: true
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-14",
			data: {
				parentMessage: 'parent',
				items: [
                    {message:'foo'},
                    {message:'bar'}
				]
			}
		})

	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-15",
			data: {
				object: {
					firstName: 'john',
					lastNmae: 'doe'
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-16",
		})
	</script>
	<script type="text/javascript">
          new Vue({
          	 el: "#app-17",
          	 data: {
          	 	numbers: [1,2,3,4,5]
          	 },
              computed: {
              	evenNumbers: function(){
              		return this.numbers.filter(function(number){
              			return number % 2 === 0
              		})
              	}
              }
          })
	</script>
	<script type="text/javascript">
		var example = new Vue({
				el:"#app-18",
				data: {
					name: '我爱我的家'
				},
				methods: {
	                greet: function (event) {
	                	alert('hello'+this.name+'!')
	                	alert(event.target.tagName)
	                }
				}
			})

	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-19",
			data: {
				counter: 0
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-20",
			methods: {
				say: function (message) {
					alert(message)
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-21",
			methods: {
				warn: function (message, event) {
					if (event) event.preventDefault()
						alert(message)
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:"#app-22",
			methods: {
				doThis: function (event) {
					if (event) event.preventDefault()
				}
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-23',
			data: {
				message: 'hello world!'
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-24',
			data: {
				checked: true
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-25',
			data: {
				checkedNames: []
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-26',
			data: {
				picked: []
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-27',
			data: {
				selected:[]
			}
		})
	</script>
	<script type="text/javascript">
		new Vue({
			el:'#app-28',
			data: {
				selected: 'A',
				options: [
                   {text:'one',value:'A'},
                   {text:'two',value:'B'},
                   {text:'three',value:'C'}
				]
			}
		})
	</script>
	<script type="text/javascript">
	Vue.component('my-component',{
	 		template:'<div>a custom component</div>'
	 	})
	new Vue({
		el:'#app-30',
	})
	</script>
	<script type="text/javascript">

		Vue.component('simple-counter',{
			el:function(){
				return '#app-31'
			},
			template: '<button v-on:click="counter += 1">{{ counter }}</button>',
			data: function(){
				return {counter: 0}
			}
		})

	</script>
	<script type="text/javascript">
		var child = {
			template: '<div>my name is luanpanfei</div>'
		}
		var vm = new Vue({
			el: '#app-32',
			components: {
				'my-component': child
			}
		})
	</script>
	<script type="text/javascript">
		Vue.component('my-component',{
			template: '<span>{{ message }}</span>',
			data: function(){
				return {message: '从你的全世界路过'}
			}
		})
		new Vue({
			el:'#app-33'
		})
	</script>
	<script type="text/javascript">
		// var data = {counter: 0}
		Vue.component('simple-counter', {
			template: '<button v-on:click="counter += 1">{{ counter }}</button>',
			data: function () {
				return {
					counter: 0
				}
			},
			// el: function() {
			//  	return '#app-34'
			//      }
		})
		new Vue({
			el: '#app-34'
		})
	</script>
	<script>
		Vue.component('my-component',{
			props: ['message'],
			template: '<span>{{ message }}</span>'
		})
		new Vue({
			el: '#app-35'
		})
	</script>

	<script type="text/javascript">
		Vue.component('button-counter',{
			template: '<button v-on:click="increment">{{ counter }}</button>',
			data: function () {
				return {
					counter: 0
				}
			},
			methods: {
				increment: function () {
					this.counter += 1
					this.$emit('increment')
				}
			},
		})
		new Vue({
			el: '#app-37',
			data: {
				total: 0
			},
			methods: {
				incrementTotal: function () {
					this.total += 1
				}
			}
		})
	</script>
	<script type="text/javascript">
	Vue.component('button-counter',{
		template:'<span>{{ message }}</span>',
		data: function () {
			return {message: '天热了'}
		},
		methods: {
			 doTheThing: function() {
				console.log('click')
			}
		}
	})
		new Vue({
			el:'#app-38'
		})
	</script>
	<script type="text/javascript">
		Vue.component('my-input',{
			template: '\
				<div class="form-group">\
				<label v-bind:for="randomId">{{ label }}:</label>\
					<input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput">\
				</div>\
			',
			props: ['value', 'label'],
			data: function () {
				return {
					randomId: 'input-' + Math.random()
				}
			},
			methods: {
				onInput: function (event) {
					this.$emit('input', event.target.value)
				}
			},
		})
		new Vue({
			el: '#v-model-example',
			data: {
				message: 'hello'
			}
		})
	</script>
</body>
</html>